<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品展示2</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/products.css" />
	</head>

	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-right">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="index.html">
									网站首页
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="products.html">
									产品展示
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="aboutUs.html">
									关于我们
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="news.html">
									新闻中心
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="onlineMsg.html">
									在线留言
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="contact.html">
									联系我们
								</a>
							</li>

						</ul>
					</div>
				</div>
			</aside>

			<div class="mui-inner-wrap">
				<header class="header mui-bar mui-bar-nav">
					<div class="logo">
						<a href=""><img src="images/logo.png"></a>
					</div>
					<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
					<!--banner-->
					<div id="slider" class="mui-slider">
						<div class="mui-slider-group mui-slider-loop">
							<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/banner2.jpg">
								</a>
							</div>
							<!-- 第一张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/banner1.jpg">
								</a>
							</div>
							<!-- 第二张 -->
							<div class="mui-slider-item">
								<a href="#">
									<img src="images/banner2.jpg">
								</a>
							</div>
							<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#">
									<img src="images/banner1.jpg">
								</a>
							</div>
						</div>
						<div class="mui-slider-indicator">
							<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>
						</div>
					</div>
					<!--banner-end-->
					<!--中间-->
					<div class="mui-content">
						<ul class="mui-table-view mui-grid-view productBox2">
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="products_detail.html">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#">
									<img class="mui-media-object" src="images/pro/cp_06.jpg">
									<div class="mui-media-body">家用暗装电源五孔</div>
								</a>
							</li>
						</ul>
						<div class="more">
							<a href="cp.html">更多产品</a>
						</div>

					</div>

					<div class="footer">
						<p>Copyright@2016 建百站素材网优惠建站 版权所有<br>技术支持：
							<a href="">中科商务网</a>
							<a href="#">管理后台</a>
						</p>
					</div>

				</div>

				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: false,
			});

			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});

			var gallery = mui("#slider");
			gallery.slider({
				interval: 500 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			
			 //主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
		</script>
	</body>

</html>